<template>
  <div class="student-body">
        <h2 class="box_tit">
            <i class="icon icon1"></i>教学进度管理
            <i class="reti"></i>
        </h2>

        <el-form :inline="true" :model="queryFormData" class="demo-form-inline" ref="queryFormData" @keyup.enter="onSubmit" label-width="60px">
          <div class="components_searchs">
            <el-form-item label="院校：" prop="schoolId">
                <el-select v-model="queryFormData.schoolId" clearable filterable placeholder="请选择院校" @change="changeSchool">
                        <el-option v-for="school in schoolList" :key="school.id" :label="school.text" :value="school.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="学院：" label-width="60px" prop="secondSchoolId">
                <el-select v-model="queryFormData.secondSchoolId" clearable placeholder="请选择学院" @change="changeSecondSchool">
                        <el-option v-for="secondSchool in secondSchoolList" :key="secondSchool.id" :label="secondSchool.text" :value="secondSchool.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="专业：" label-width="60px" prop="professionId">
                <el-select v-model="queryFormData.professionId" clearable placeholder="请选择专业" @change="changeProfession">
                        <el-option v-for="profession in professionList" :key="profession.id" :label="profession.text" :value="profession.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" icon="el-icon-refresh" @click="resertSearch">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" icon="el-icon-view"
                    @click="advancedSearchState=!advancedSearchState">高级搜索</el-button>
            </el-form-item>
          </div>
          <div  v-if="advancedSearchState" class="components_searchs" @keyup.enter="onSubmit">
            <el-form-item label="班级：" prop="classesIds">
                <el-select clearable filterable v-model="queryFormData.classesIds" placeholder="请选择班级">
                        <el-option v-for="classItem in classList" :key="classItem.id" :label="classItem.text" :value="classItem.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="课程名：" prop="courseName">
                <el-input v-model="queryFormData.courseName" clearable placeholder="请填写课程名称"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <!-- <div class="scrollBarX"> -->
          <div class="scrollBarX">
                <vue-table
                      :api-url="proccessTable.apiUrl"
                      :fields="proccessTable.fields"
                      :appendParams="queryFormData"
                      :content="self"
                      ref="proccessTable">
                </vue-table>
        </div>
        <progress-feedback-detail ref="progressFeedbackDetail"></progress-feedback-detail>
        </div>
  </div>
</template>
<script>
  import progress_feedback_detail from './progress-feedback-detail'
    export default{
        components:{
          'progress-feedback-detail':progress_feedback_detail
        },
        data(){
            return {
                self:this,
                advancedSearchState: false,
                queryFormData:{
                  schoolId:null,
                  secondSchoolId:null,
                  professionId:null,
                  classesIds:null,
                  courseName:null
                },
                proccessTable: {
                    apiUrl: api.getTeacherWorkProgressManagerList,
                    fields: [{
                            prop: "schoolName",
                            label: "院校",
                        },
                        {
                            prop: "secondSchoolName",
                            label: "学院",
                        },
                        {
                            prop: "professionName",
                            label: "专业",
                        },
                        {
                            prop: "classesNames",
                            label: "班级",
                        },
                        {
                            prop: "courseName",
                            label: "课程名",
                        },
                        {
                            prop: "teachUserName",
                            label: "讲师",
                        },
                        {
                            prop: "teachWeek",
                            label: "教学周",
                            formatter:function(row, column, cellValue){
                                return "第"+row.teachWeek+"周";
                            },
                        },
                        {
                            prop:"week",
                            label: "星期",
                            formatter:function(row, column, cellValue){
                              let numberList = ["一","二","三","四","五","六","七"]
                                return '星期'+numberList[cellValue-1];
                            },
                            width:80
                        },
                        {
                            prop:"section",
                            label: "节次",
                            formatter:function(row, column, cellValue){
                                return "第"+row.section+"节";
                            },
                            width:80
                        },
                        {
                            prop:"teachPlace",
                            label: "地点"
                        },

                        {
                            prop: "__component",
                            label: "操作",
                            componentName:"processFeed"
                        },
                    ],
                },
                lessonTableList: [],
                schoolList:[],
                secondSchoolList:[],
                professionList:[],
                classList:[],
            }
        },
        created(){
            // this.getTeacherWorkProgressManagerPaginationData();
            let self = this;
             this.getSchoolList();
        },
        methods:{
            onSubmit(){
                this.$refs.proccessTable.$emit('vuetable:refresh');
            },
            resertSearch(){
              if(this.$refs['queryFormData']!==undefined){
                    this.$refs['queryFormData'].resetFields();
                }
                this.$refs.proccessTable.$emit('vuetable:refresh');
            },
            //获取学校
            getSchoolList(){
                let vm = this;
                vm.axios.get(api.getSchoolList).then((response) => {
                    if (response.data.success) {
                        this.schoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            //学校监听
            changeSchool(schoolId){
                this.queryFormData.secondSchoolId = null;
                this.queryFormData.professionId=null;
                this.queryFormData.classesIds=null;
                this.secondSchoolList = [];
                this.professionList = [];
                this.classList = [];
                this.getSecondSchoolList(schoolId);
            },
            // 获取二级院系数据
            getSecondSchoolList(schoolId) {
                let vm = this;
                vm.axios.get(api.getSecondSchoolList,{
                    params: {
                        schoolId: schoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        vm.secondSchoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            //二级学校监听
            changeSecondSchool(secondSchoolId){
                let schoolId = this.queryFormData.schoolId;
                this.queryFormData.professionId=null;
                this.queryFormData.classesIds=null;
                this.professionList = [];
                this.classList = [];
                this.getProfessionlList(schoolId,secondSchoolId);
            },
            //获取筛选后的专业
            getProfessionlList(schoolId,secondSchoolId){
                let vm = this;
                vm.axios.get(api.getProfeesionList, {
                     params: {
                        schoolId: schoolId,
                        secondSchoolId: secondSchoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.professionList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            changeProfession(professionId){
                let schoolId = this.queryFormData.schoolId;
                let secondSchoolId = this.queryFormData.secondSchool;
                this.queryFormData.classesIds=null;
                this.classList = [];
                this.getClassList(schoolId,secondSchoolId,professionId);
            },
            //获取筛选后的班级
            getClassList(schoolId,secondSchoolId,professionId){
                let vm = this;
                vm.axios.get(api.getClassList, {
                     params: {
                        schoolId: schoolId,
                        secondSchoolId: secondSchoolId,
                        professionId:professionId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.classList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            showProcessFeedDialog(val){
              this.$refs.progressFeedbackDetail.showDialog(val);
            }
        }
    }
</script>
<style scoped>
.student-body {
  min-height: 545px;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 15px;
}
.student-body .contents span {
  display: inline-block;
  width: 100px;
  margin-top: 10px;
  text-align: right;
}
.student-body .contents .spanInput {
  height: 26px;
  width: 206px;
  line-height: 26px;
  font-size: 12px;
  color: #cdcdcd;
  text-indent: 5px;
  border-radius: 15px;
  border: 1px solid #cdcdcd;
  box-sizing: border-box;
  outline: none;
}

.student-body .contents .sexSpan {
  width: 20px;
  padding-left: 20px;
}
.student-body .contents .sexSpans{
  width: 50px;
}
.student-body .contents .lableInput {
  position: absolute;
  top: 12px;
  left: 105px;
}
.student-body .contents
.student-body .reti {
  width: 94px;
}
.student-body .inputs {
  width: 100%;
  height: 40px;
  padding-top: 20px;
}
.student-body .inputs > span {
  font-size: 12px;
  color: #333;
  padding-left: 1px;
}

.box_tit {
  border-bottom: 1px solid #e6e8ec;
  position: relative;
  padding: 4px 0 10px 30px;
  margin-top: 0;
  font-weight: bold;
  line-height: 16px;
}
</style>

